<!--
 * @Description: 该页面功能已经废弃，此页面内容仅做留存以备查询。-- Taoist
-->
<template>
	<view class="mainPage" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		<u-field v-model="hname" label="出诊地名称" placeholder="请填写出诊医院名称">
		</u-field>
		<u-field v-model="position" label="出诊地位置" type="textarea" placeholder="请填写出诊医院位置">
		</u-field>
		<u-field label="挂号费设置" :disabled="true" right-icon="arrow-down" @click="guahao">
		</u-field>
		<template v-if="show1==true">
			<view class="flex-container" v-show="show3==true">
				<view class="title">选择挂号费单价 (元)</view>
				<view class="flex-item" :class="index==chengshiNum?'active':''" v-for=" (item,index) in price" :key="index" @click="dianji1(index,item.label)">{{item.label}}</view>
			</view>
			<view class="flex-container">
				<view class="title">自定义挂号费 (元)</view>
				<input class="title" placeholder="请输入自定义挂号费价格" type="number" @input="input" v-model="register_price" />
			</view>
		</template>
		<u-field label="接诊设置" :disabled="true" right-icon="arrow-down" @click="jiezhen">
		</u-field>
		<view class="jiezhensz" v-if="show2==true">
			<!-- 1 -->
			<view class="box">
				<view class="title">
					<view class="item">
						<text class="shijian">时间</text>
						<text class="xingqi">星期</text>
					</view>
					<view class="item">
						上午
					</view>
					<view class="item">
						下午
					</view>
				</view>
				<view class="time-list">
					<view class="time-item">
						每周日
					</view>
					<view class="time-item" @click="dianji(13)">
						<text class="chuzhen" v-if="Scheduling[0].am!=''&&Scheduling[0].am!=0">出诊</text>
						<text v-else>设置</text>
					</view>
					<view class="time-item" @click="dianji(14)">
						<text class="chuzhen" v-if="Scheduling[0].pm!=''&&Scheduling[0].pm!=0">出诊</text>
						<text v-else>设置</text>
					</view>
					<view class="time-item">
						每周一
					</view>
					<view class="time-item" @click="dianji(1)">
						<text class="chuzhen" v-if="Scheduling[1].am!=''&&Scheduling[1].am!=0">出诊</text>
						<text v-else>设置</text>
					</view>
					<view class="time-item" @click="dianji(2)">
						<text class="chuzhen" v-if="Scheduling[1].pm!=''&&Scheduling[1].pm!=0">出诊</text>
						<text v-else>设置</text>
					</view>
					<view class="time-item">
						每周二
					</view>
					<view class="time-item" @click="dianji(3)">
						<text class="chuzhen" v-if="Scheduling[2].am!=''&&Scheduling[2].am!=0">出诊</text>
						<text v-else>设置</text>
					</view>
					<view class="time-item" @click="dianji(4)">
						<text class="chuzhen" v-if="Scheduling[2].pm!=''&&Scheduling[2].pm!=0">出诊</text>
						<text v-else>设置</text>
					</view>
					<view class="time-item">
						每周三
					</view>
					<view class="time-item" @click="dianji(5)">
						<text class="chuzhen" v-if="Scheduling[3].am!=''&&Scheduling[3].am!=0">出诊</text>
						<text v-else>设置</text>
					</view>
					<view class="time-item" @click="dianji(6)">
						<text class="chuzhen" v-if="Scheduling[3].pm!=''&&Scheduling[3].pm!=0">出诊</text>
						<text v-else>设置</text>
					</view>
					<view class="time-item">
						每周四
					</view>
					<view class="time-item" @click="dianji(7)">
						<text class="chuzhen" v-if="Scheduling[4].am!=''&&Scheduling[4].am!=0">出诊</text>
						<text v-else>设置</text>
					</view>
					<view class="time-item" @click="dianji(8)">
						<text class="chuzhen" v-if="Scheduling[4].pm!=''&&Scheduling[4].pm!=0">出诊</text>
						<text v-else>设置</text>
					</view>
					<view class="time-item">
						每周五
					</view>
					<view class="time-item" @click="dianji(9)">
						<text class="chuzhen" v-if="Scheduling[5].am!=''&&Scheduling[5].am!=0">出诊</text>
						<text v-else>设置</text>
					</view>
					<view class="time-item" @click="dianji(10)">
						<text class="chuzhen" v-if="Scheduling[5].pm!=''&&Scheduling[5].pm!=0">出诊</text>
						<text v-else>设置</text>
					</view>
					<view class="time-item">
						每周六
					</view>
					<view class="time-item" @click="dianji(11)">
						<text class="chuzhen" v-if="Scheduling[6].am!=''&&Scheduling[6].am!=0">出诊</text>
						<text v-else>设置</text>
					</view>
					<view class="time-item" @click="dianji(12)">
						<text class="chuzhen" v-if="Scheduling[6].pm!=''&&Scheduling[6].pm!=0">出诊</text>
						<text v-else>设置</text>
					</view>
				</view>
				<view class="btn-box">
					<text class="qingkong" @click="empty">清空</text>
					<text class="quanxuan" @click="quanxuan">全选</text>
				</view>
				<view class="shijianduan">
					<text>!</text>上午时间段为8:00-12:00 下午时间段为12:00-17:00
				</view>
			</view>
			<!-- <view class="queding-box">
				<view class="queding">
					确定
				</view>
			</view> -->
			<u-popup v-model="show" mode="center" border-radius="16">
				<view class="tanchuceng">
					<view class="top">
						<view class="left">
							设置人数
						</view>
						<view class="right">
							<image @click="guanbi" src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/shanchu1.png" mode=""></image>
						</view>
					</view>
					<view class="bottom">
						<view class="yuyue-box">
							<text>设置可预约人数为</text>
							<input type="number" value="" placeholder-style="color: #768196;" placeholder="0" v-model.trim="peopleNum" />
						</view>
						<view class="quedingjian" @click="quedingjian">
							<text>确定</text>
						</view>
					</view>
				</view>
			</u-popup>
			<u-popup v-model="showAll" mode="center" border-radius="16">
				<view class="tanchuceng-all">
					<view class="time-list">
						<view class="time-item" v-for="(item,index) in Scheduling" :key="index">
							<view class="left">
								每周{{item.name}}
							</view>
							<view class="right">
								<view class="shangwu">
									<text>上午</text>
									<input type="number" v-model="item.am" placeholder="0" placeholder-style="font-size: 28rpx;" value="" />
								</view>
								<view class="xiawu">
									<text>下午</text>
									<input type="number" v-model="item.pm" placeholder="0" placeholder-style="font-size: 28rpx;" value="" />
								</view>
								<!-- <image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/xuanzhong.png" mode=""></image> -->
							</view>
						</view>
					</view>
					<view class="btn-box">
						<text class="quxiao" @click="quxiao">取消</text>
						<text class="queding" @click="determine">确定</text>
					</view>
				</view>
			</u-popup>
			<!-- 2 -->
		</view>
		<view class="baocunbut">
			<button @click="preservation">保存</button>
		</view>
	</view>
</template>
<script>
var that
import publicHead from "@/components/publicHead/publicHead.vue"
export default {
	components: {
		publicHead
	},
	data() {
		return {
			indexs: 0,
			title: '接诊设置',
			show: false,
			showAll: false,
			position: '', //出诊地位置
			peopleNum: '', ///预约人数
			peopleNum2: "",
			hname: '',
			show1: false,
			show2: false,
			show3: true,
			cost: '',
			index: '',
			chengshiNum: 100,
			visit_id: '',
			tpl_id: '',
			price: [{
				label: '9.00',
				value: 1,
			},
			{
				label: '10.00',
				value: 2,
			},
			{
				label: '12.00',
				value: 3,
			}, {
				label: '9.00',
				value: 4,
			},
			{
				label: '10.00',
				value: 5,
			},
			{
				label: '12.00',
				value: 6,
			}
			],
			register_price: '',
			datalist: '',
			Scheduling: [
				{
					name: '日',
					am: '0',
					pm: '0'
				},
				{
					name: '一',
					am: '0',
					pm: '0'
				},
				{
					name: '二',
					am: '0',
					pm: '0'
				},
				{
					name: '三',
					am: '0',
					pm: '0'
				},
				{
					name: '四',
					am: '0',
					pm: '0'
				},
				{
					name: '五',
					am: '0',
					pm: '0'
				},
				{
					name: '六',
					am: '0',
					pm: '0'
				},
			],
		}
	},
	onLoad(e) {
		that = this
		that.visit_id = e.visit_id
		that.tpl_id = e.tpl_id
		console.log('visit_id', e.visit_id, e.tpl_id)
		that.obtain()
		//that.preservation() 
	},
	methods: {
		guahao() {
			that.show1 = !that.show1
			console.log(that.show1)
		},
		jiezhen() {
			that.show2 = !that.show2
			console.log(that.show2)
		},
		dianji1(index, label) {
			this.chengshiNum = index
			that.register_price = label
			console.log(index, label)
		},
		tovisitname() {
			uni.navigateTo({
				url: "./visitname"
			})
		},
		tovisitposition() {
			uni.navigateTo({
				url: "./position"
			})
		},
		toreceive() {
			uni.navigateTo({
				url: "./acceptsSettings"
			})
		},
		toregista() {
			uni.navigateTo({
				url: "./registration"
			})
		},
		dianji(index) {
			that.show = true
			that.indexs = index
			console.log('indexs', that.indexs)
		},
		guanbi() {
			that.show = false
		},
		quedingjian() {
			if (that.peopleNum == "") {
				uni.showToast({
					icon: "none",
					title: "人数未填写"
				})
				return
			}
			if (that.indexs == 1) {
				that.Scheduling[1].am = that.peopleNum
				console.log('周一上午', that.Scheduling[1].am)
			} else if (that.indexs == 2) {
				that.Scheduling[1].pm = that.peopleNum
				console.log('周一下午', that.Scheduling[1].pm)
			} else if (that.indexs == 3) {
				that.Scheduling[2].am = that.peopleNum
				console.log('周二上午', that.Scheduling[2].am)
			} else if (that.indexs == 4) {
				that.Scheduling[2].pm = that.peopleNum
				console.log('周二下午', that.Scheduling[2].pm)
			} if (that.indexs == 5) {
				that.Scheduling[3].am = that.peopleNum
				console.log('周三上午', that.Scheduling[3].am)
			} else if (that.indexs == 6) {
				that.Scheduling[3].pm = that.peopleNum
				console.log('周三下午', that.Scheduling[3].pm)
			} else if (that.indexs == 7) {
				that.Scheduling[4].am = that.peopleNum
				console.log('周四上午', that.Scheduling[4].am)
			} else if (that.indexs == 8) {
				that.Scheduling[4].pm = that.peopleNum
				console.log('周四下午', that.Scheduling[4].pm)
			} else if (that.indexs == 9) {
				that.Scheduling[5].am = that.peopleNum
				console.log('周五上午', that.Scheduling[5].am)
			} else if (that.indexs == 10) {
				that.Scheduling[5].pm = that.peopleNum
				console.log('周五下午', that.Scheduling[5].pm)
			} if (that.indexs == 11) {
				that.Scheduling[6].am = that.peopleNum
				console.log('周六下午', that.Scheduling[6].am)
			} else if (that.indexs == 12) {
				that.Scheduling[6].pm = that.peopleNum
				console.log('周六下午', that.Scheduling[6].pm)
			} else if (that.indexs == 13) {
				that.Scheduling[0].am = that.peopleNum
				console.log('周日上午', that.Scheduling[0].am)
			} else if (that.indexs == 14) {
				that.Scheduling[0].pm = that.peopleNum
				console.log('周日下午', that.Scheduling[0].pm)
			}
			that.show = false
		},
		determine() {
			console.log('1122')
			for (let i = 0; i < that.Scheduling.length; i++) {
				console.log('11223')
				console.log(that.Scheduling[i])
				that.Scheduling = that.Scheduling
				that.showAll = false
			}
		},
		quanxuan() {
			that.showAll = true
		},
		empty() {
			for (let i = 0; i < that.Scheduling.length; i++) {
				that.Scheduling[i].am = 0
				that.Scheduling[i].pm = 0
				console.log(that.Scheduling[i])
			}
			//that.peopleNum=0
		},
		quxiao() {
			for (let i = 0; i < that.Scheduling.length; i++) {
				console.log('11223')
				console.log(that.Scheduling[i])
				that.Scheduling[i].am = 0
				that.Scheduling[i].pm = 0
				that.showAll = false
			}
		},
		//获取当前地址信息
		obtain() {
			that.$postAjax1('Doctorsside_block_visit', {
				visit_id: that.visit_id
			}, function (data) {
				that.datalist = data.data.data[0]
				that.hname = that.datalist.address_name
				that.position = that.datalist.address
				that.register_price = that.datalist.register_price
				that.Scheduling = that.datalist.duration
				console.log('获取成功', that.datalist)
			})
		},
		//修改出诊地
		preservation() {
			that.$postAjax1('Doctorsside_edits_visit', {
				address_name: that.hname,
				address: that.position,
				register_price: that.register_price,
				visit_id: that.visit_id,
				Scheduling: JSON.stringify(that.Scheduling),
				tpl_id: that.tpl_id
			}, function (data) {
				uni.navigateBack()
				console.log('修改成功')
			})
		},
		input() {
			that.show3 = false
			if (that.register_price == '') {
				that.show3 = true
				that.chengshiNum = 100
			}
		}
	}
}
</script>
<style scoped lang="scss">
.mainPage {
	padding: 40rpx 0;
}
.flex-container {
	// display: -webkit-flex;
	// display: flex;
	// -webkit-justify-content: flex-end;
	// justify-content: space-around;
	width: 100%;
	background-color: #ffffff;
	padding: 30rpx;
	margin-top: 14rpx;
	.title {
		padding: 20rpx;
		font-size: 28rpx;
	}
	.flex-item {
		width: 30%;
		margin: 30rpx 10rpx;
		color: #adadad;
		display: inline-block;
		border: 1rpx #d1d1d1 solid;
		padding: 20rpx 30rpx;
		border-radius: 60rpx;
		text-align: center;
	}
	.active {
		background-color: #fe7600ff;
		color: #ffffff;
	}
}
.jiezhensz {
	.box {
		padding: 30rpx 32rpx;
		.title {
			display: flex;
			justify-content: space-between;
			margin-bottom: 12rpx;
			.item {
				width: calc((80% - 24rpx) / 2);
				height: 88rpx;
				background: #ffffff;
				border-radius: 4rpx;
				border: 1rpx solid rgba(0, 0, 0, 0.1);
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				line-height: 88rpx;
				text-align: center;
				&:nth-of-type(1) {
					width: 20%;
					position: relative;
					font-size: 26rpx;
					font-weight: 400;
					color: #3b3535;
					overflow: hidden;
					&::before {
						content: "";
						display: block;
						width: 200rpx;
						height: 1rpx;
						position: absolute;
						top: 10rpx;
						left: 0;
						transform: translateY(5rpx) rotate(35deg);
						transform-origin: 15% 0%;
						background-color: rgba(0, 0, 0, 0.1);
					}
					.shijian {
						position: absolute;
						top: 10rpx;
						right: 10rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #3b3535;
						line-height: 36rpx;
					}
					.xingqi {
						position: absolute;
						bottom: 10rpx;
						left: 10rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #3b3535;
						line-height: 36rpx;
					}
				}
			}
		}
		.time-list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.time-item {
				margin-bottom: 12rpx;
				width: calc((80% - 24rpx) / 2);
				height: 88rpx;
				background: #ffffff;
				border-radius: 4rpx;
				border: 1rpx solid rgba(0, 0, 0, 0.1);
				font-size: 28rpx;
				font-weight: 400;
				color: #768196;
				line-height: 88rpx;
				text-align: center;
				.chuzhen {
					color: rgba(148, 136, 247, 1);
				}
				&:nth-of-type(3n + 1) {
					width: 20%;
					font-weight: 500;
					color: #3b3535;
				}
			}
		}
		.btn-box {
			text-align: right;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.08);
			padding-bottom: 18rpx;
			.qingkong {
				background: #d8d8d8;
				border-radius: 4rpx;
				padding: 6rpx 36rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #ffffff;
				line-height: 34rpx;
			}
			.quanxuan {
				margin: 0 16rpx 0 40rpx;
				background: linear-gradient(223deg, #ff9331 0%, #fe7600 100%);
				border-radius: 4rpx;
				padding: 6rpx 36rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #ffffff;
				line-height: 34rpx;
			}
		}
		.shijianduan {
			padding-top: 26rpx;
			text-align: center;
			font-size: 26rpx;
			font-weight: 400;
			color: #343434;
			line-height: 36rpx;
			text {
				margin-right: 20rpx;
				font-size: 30rpx;
				color: #ff0000;
			}
		}
	}
	.queding-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 0 32rpx 100rpx;
		.queding {
			text-align: center;
			width: 100%;
			height: 98rpx;
			background: linear-gradient(219deg, #ff9331 0%, #fe7600 100%);
			border-radius: 8rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #ffffff;
			line-height: 98rpx;
		}
	}
	.tanchuceng {
		width: 584rpx;
		height: 344rpx;
		background: #ffffff;
		.top {
			padding: 36rpx 32rpx 14rpx;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.08);
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				line-height: 44rpx;
			}
			.right {
				image {
					display: block;
					width: 38rpx;
					height: 38rpx;
				}
			}
		}
		.bottom {
			.yuyue-box {
				padding: 26rpx 0 42rpx;
				text-align: center;
				text {
					vertical-align: middle;
					font-size: 24rpx;
					font-weight: 400;
					color: #3b3535;
					line-height: 34rpx;
					margin-right: 24rpx;
				}
				input {
					display: inline-block;
					vertical-align: middle;
					width: 174rpx;
					height: 74rpx;
					border: 2rpx solid #f7f4f4;
				}
			}
			.quedingjian {
				text-align: center;
				text {
					display: inline-block;
					width: 200rpx;
					height: 76rpx;
					background: linear-gradient(219deg, #ff9331 0%, #fe7600 100%);
					border-radius: 4rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #ffffff;
					text-align: center;
					line-height: 76rpx;
				}
			}
		}
	}
	.tanchuceng-all {
		width: 634rpx;
		background: #ffffff;
		.time-list {
			.time-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left {
					width: 178rpx;
					text-align: center;
					font-size: 28rpx;
					font-weight: 500;
					color: #3b3535;
					line-height: 40rpx;
				}
				.right {
					padding: 28rpx 60rpx 28rpx 28rpx;
					width: 100%;
					border-bottom: 2rpx solid rgba(0, 0, 0, 0.08);
					display: flex;
					justify-content: space-between;
					align-items: center;
					.shangwu,
					.xiawu {
						display: inline-block;
						text {
							font-size: 28rpx;
							font-weight: 400;
							color: #3b3535;
							line-height: 40rpx;
							vertical-align: middle;
							margin-right: 10rpx;
						}
						input {
							display: inline-block;
							vertical-align: middle;
							font-size: 28rpx;
							font-weight: 400;
							color: #3b3535;
							line-height: 40rpx;
							width: 60rpx;
						}
					}
					image {
						display: inline-block;
						width: 34rpx;
						height: 34rpx;
					}
				}
			}
		}
		.btn-box {
			padding: 30rpx 0 40rpx;
			text-align: center;
			.quxiao {
				font-size: 24rpx;
				font-weight: 400;
				color: #ffffff;
				line-height: 34rpx;
				padding: 6rpx 36rpx;
				background: #d8d8d8;
				border-radius: 4rpx;
				margin-right: 82rpx;
			}
			.queding {
				font-size: 24rpx;
				font-weight: 400;
				color: #ffffff;
				line-height: 34rpx;
				padding: 6rpx 36rpx;
				background: linear-gradient(223deg, #ff9331 0%, #fe7600 100%);
				border-radius: 4rpx;
			}
		}
	}
}
.baocunbut {
	width: 100%;
	margin-top: 100rpx;
	button {
		width: 90%;
		background: linear-gradient(219deg, #ff9331 0%, #fe7600 100%);
		opacity: 1;
		border-radius: 8rpx;
		color: #ffffff;
	}
}
</style>
